<template>
  <el-dialog
      v-model="dialogVisible"
      :title="title+'数据详情'"
      width="95%"
      class="lookDialog"
  >
    <el-table
        border
        header-cell-class-name="headerCell"
        class="lookTable"
        height="500"
        :data="dataStore.lookTable.lookTableData"
        style="width: 100%"
        v-loading="dataStore.tableLoading"
    >
      <el-table-column
          header-align="center"
          align="center"
          v-for="(item,index) in dataStore.lookTable.lookTableHeader"
          :prop="item" :label="item">
        <template #default="scope">
          <div class="text-hidden-one">{{ scope.row[item] }}</div>
        </template>
      </el-table-column>
    </el-table>
    <div class="paginationFooter mt-10">
      <el-pagination
          :small="true"
          v-model:current-page="dataStore.lookTable.page"
          v-model:page-size="dataStore.lookTable.limit"
          :page-sizes="[10,20, 30,200, 300, 400]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="dataStore.lookTable.total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
      />
    </div>
  </el-dialog>
</template>
<script setup lang="ts">
//组件

//接口


//api
import {reactive, ref} from 'vue';
import useDataWriteReportStore from "@/store/modules/dataWriteReport/dataWriteReport";
import {writeReportItemType} from "@/api/datWriteReport/type";

//data
const dialogVisible = ref<boolean>(false)
let dataStore = useDataWriteReportStore()
let curdataItem = ref<writeReportItemType>()
let title = ref('')
/*
函数
*/

/**************************接口函数**************************/

/**************************操作函数**************************/
let init = async (dataItem:writeReportItemType) => {
  dialogVisible.value = true
  curdataItem.value=dataItem
  title.value = dataItem.dataName
  dataStore.useGetLookTableHeadrs({dataId:dataItem.id})
  dataStore.useGetLookTableData({dataId:dataItem.id,dataTime:dataItem.lastInputTime})
}

const handleSizeChange = (val: number) => {
  dataStore.useGetLookTableData({dataId:curdataItem.value!.id,dataTime:curdataItem.value!.lastInputTime})

}
const handleCurrentChange = (val: number) => {
  dataStore.useGetLookTableData({dataId:curdataItem.value!.id,dataTime:curdataItem.value!.lastInputTime})

}


defineExpose({
  dialogVisible,
  init
})
</script>

<style lang="scss" scoped>
.lookTable {
  :deep(.el-table__header  .el-table__cell) {
    background-color: #F2F2F2;
  }
}
</style>

